<template>
    <div class="comment-reply">
        <van-nav-bar :title="(comment.reply_count === 0) ? '暂无回复' : `${comment.reply_count}条回复`" fixed>
            <template #left>
                <van-icon name="cross" @click="$emit('close')" />
            </template>
        </van-nav-bar>

        <div class="scroll-top">
            <CommentItem :comment="comment"></CommentItem>
            <van-cell title="全部回复" />
            <ArticleComment :source="comment.com_id" type="c" :list="commentList"></ArticleComment>
            <div class="post-wrap">
                <van-button size="small" round class="post-btn" @click="isReplyShow = true">写回复</van-button>
            </div>
        </div>

        <van-popup v-model="isReplyShow" position="bottom">
            <CommentPost :target="comment.com_id" @postSuccess="onPostSuccess"></CommentPost>
        </van-popup>
    </div>
</template>

<script>
import CommentItem from './comment-item.vue'
import ArticleComment from './article-comment.vue'
import CommentPost from './comment-post.vue'
import { addComment } from '../../../api/comment'

export default {
    name: 'CommentReply',
    props: {
        comment: {
            type: Object,
            required: true
        }
    },
    data() {
        return {
            isReplyShow: false,
            commentList: []
        }
    },
    methods: {
        onPostSuccess(data) {
            this.comment.reply_count++
            this.isReplyShow = false
            this.commentList.unshift(data.new_obj)
        }
    },
    components: {
        CommentItem,
        ArticleComment,
        CommentPost
    }
}
</script>

<style scoped lang="less">
.comment-reply {
    .scroll-top {
        position: fixed;
        top: 92px;
        left: 0;
        right: 0;
        bottom: 88px;
        overflow-y: auto;

        .post-wrap {
            position: fixed;
            bottom: 0;
            left: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 88px;
            background-color: #fff;
            border-top: 1px solid #d8d8d8;

            .post-btn {
                width: 60%;
            }
        }

    }
}
</style>